<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动会</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">

    <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">

                  <el-form-item label="比赛名称" prop="eventName">
                    <el-input v-model="form.eventName"></el-input>
                  </el-form-item>

                  <el-form-item label="比赛类别" prop="eventType">
                    <el-radio-group v-model="form.eventType">
                      <el-radio label="fe">田赛</el-radio>
                      <el-radio label="te">径赛</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="比赛记录" prop="eventType">
                    <el-input-number v-model="form.eventRecord" :precision="2" :step="0.01"></el-input-number>
                  </el-form-item>

                  <el-form-item label="比赛场地" prop="fields">
                    <el-select
                      v-model="form.fields"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      placeholder="请选择比赛场地">
                      <el-option
                        v-for="item in fieldList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        form: {
          fields: [],  // 比赛场地
          eventType: null,
          eventName: '',
          eventRecord: 0
        },
        rules: {
          fields: [
            { type: 'array', required: true, message: '比赛场地', trigger: 'change' }
          ],
          eventType: [
            { required: true, message: '请选择比赛类型', trigger: 'change' }
          ],
          eventName: [
            { required: true, message: '请输入比赛名称', trigger: 'blur' }
          ],
          eventRecord: [
            { required: true, message: '请输入比赛记录', trigger: 'blur' }
          ]
        },
        fieldList: [{
          value: '跳高场地一',
          label: '跳高场地一'
        }, {
          value: '跳高场地二',
          label: '跳高场地二'
        }, {
          value: '跳远场地一',
          label: '跳远场地一'
        }, {
          value: '跳远场地二',
          label: '跳远场地二'
        }, {
          value: '东区操场',
          label: '东区操场'
        }, {
          value: '西区操场',
          label: '西区操场'
        }]
      }
    },
    methods: {
      doSubmit() {
        let _this = this;

        let newEvent = this.form;

        axios.post('/newEvent', newEvent)
          .then(function (response) {
            if (response.data.status === 200) {
              _this.$message.success(response.data.msg)
              location.href = "/eventList";
              // console.log(response)
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      }
    }
  })
</script>
</body>
</html>
